<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app{
            border: 1px solid #cccccc;
            padding: 10px;
        }
        .box{
            border: 1px solid #cccccc;
            margin-left: 50px;
            padding: 10px;
        }
        p{
            padding-left: 20px;
        }
        input{
            margin-left: 20px;
        }
    </style>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>父组件范围</h3>
        <p>msg:{{ msg }}</p>
        <child-one v-on:update-msg="updateMsg($event)"></child-one>
    </div>
</body>
<script type="text/x-template" id="one">
    <div class="box">
        <h3>子组件范围</h3>
        <p>msg:{{ msg }}</p>
        <input type="button" value="发送数据" @click="sendMsg()">
    </div>
</script>
<script>
    /*
        方式1：
            1、vue为没有组件实例提供一个实例属性 this.$parent， 描述当前组件的父组件实例
            2、在子组件实例构建的过程中，通过触发对于 this.$parent 中的数据变量的赋值方式，完成数据传递操作
        方式2：
            1、技术实现：事件绑定，事件触发
               详细描述：在子组件标签上 以事件绑定的方式 调用父组件方法，在子组件对应的执行区通过 $emit 实例属性进行自定义事件触发，并传递参数
            + 事件绑定：在子组件标签上 以事件绑定的方式 绑定自定义事件
                        子组件标签上绑定的事件，在vue对组件进行实例化时，会统一转存到 组件实例私有事件记录对象 _events 中
            + 事件触发：在子组件的执行范围了，vue提供一个实例方法 $emit() 可以调用私有事件记录对象 _events 中的 自定义事件
                        $emit(需要被触发的绑定事件名称,$event的取值) 
                        - 配合调试工具 记录传递过程
    */
    Vue.component("ChildOne",{
        template:"#one",
        data(){
            return {
                msg:"子组件的数据"
            }
        },
        methods: {
            sendMsg(){
                this.$emit("update-msg",this.msg)
            }
        },
        // created() {
        //     console.log(this);
        //     // console.log(this.$parent);
        //     // this.$parent.msg = this.msg
        //     // this.$emit("update-msg","111111")
        //     this.$emit("update-msg",this.msg)
        // },
    })
    new Vue({
        el:"#app",
        data:{
            msg:""
        },
        methods: {
            updateMsg(e){
                console.log("父组件的updateMsg方法",e);  
                this.msg = e;
            }
        },
    })


</script>
</html>